<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.DatePicker - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="selected">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.DatePicker 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_6a586bd6ae227a6ba2d98c96e8b06af1">기능과 동작 방식</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_cbd30bb38edc7ffc879aabd5f479a2c7">기본 초기화 형태</a>
		                    </li>
		                
		            </ul>
		        

		        
		            <h3><a href="#demo">데모</a></h3>
		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors extends">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.DatePicker">
		                            DatePicker
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods extends">
		                
		                    <li class=" inherited-item">
		                        <a href="#method_activate" title="컴포넌트를&nbsp;활성화한다.
_onActivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onActivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            activate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_addDatePickerSet" title="DatePicker&nbsp;세트를&nbsp;추가한다.">
		                            addDatePickerSet()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_deactivate" title="컴포넌트를&nbsp;비활성화한다.
_onDeactivate&nbsp;메서드를&nbsp;수행하므로&nbsp;반드시&nbsp;상속받는&nbsp;클래스에&nbsp;_onDeactivate&nbsp;메서드가&nbsp;정의되어야한다.">
		                            deactivate()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getCalendar" title="Calendar&nbsp;객체를&nbsp;가져온다.">
		                            getCalendar()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getCalendarLayer" title="달력레이어를&nbsp;가져온다.">
		                            getCalendarLayer()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getDate" title="선택된&nbsp;날짜를&nbsp;가져온다.">
		                            getDate()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getDatePickerSet" title="DatePicker&nbsp;세트를&nbsp;가져온다.">
		                            getDatePickerSet()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getInput" title="DatePicker&nbsp;세트에&nbsp;해당하는&nbsp;Input&nbsp;엘리먼트를&nbsp;가져온다.">
		                            getInput()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayerManager" title="LayerManager&nbsp;객체를&nbsp;가져온다.">
		                            getLayerManager()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_getLayerPosition" title="LayerPosition&nbsp;객체를&nbsp;가져온다.">
		                            getLayerPosition()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_isActivating" title="컴포넌트의&nbsp;활성여부를&nbsp;가져온다.">
		                            isActivating()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_isSelectable" title="지정한&nbsp;날짜가&nbsp;DatePicker&nbsp;세트에서&nbsp;선택가능한&nbsp;날짜인지&nbsp;확인한다.">
		                            isSelectable()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class=" inherited-item">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            <span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_removeDatePickerSet" title="DatePicker&nbsp;세트를&nbsp;제거한다.">
		                            removeDatePickerSet()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_setDate" title="선택한&nbsp;날짜에&nbsp;대해&nbsp;DatePicker&nbsp;세트의&nbsp;Input에&nbsp;형식에&nbsp;맞는&nbsp;날짜&nbsp;값을&nbsp;설정한다.">
		                            setDate()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		            <h3><a href="#event">이벤트</a></h3>
		
		            <ul class="events extends">
		                
		                    <li class="">
		                        <a href="#event_afterDraw" title="달력을&nbsp;모두&nbsp;그린&nbsp;후에&nbsp;발생">
		                            afterDraw
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_beforeDraw" title="달력을&nbsp;그리기&nbsp;전에&nbsp;발생">
		                            beforeDraw
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_beforeSelect" title="달력&nbsp;레이어에서&nbsp;날짜를&nbsp;선택하고&nbsp;Text&nbsp;Input에&nbsp;값이&nbsp;설정되기&nbsp;직전에&nbsp;실행">
		                            beforeSelect
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_click" title="Input&nbsp;엘리먼트에&nbsp;마우스&nbsp;클릭&nbsp;하였을&nbsp;때&nbsp;발생">
		                            click
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_draw" title="달력을&nbsp;그리면서&nbsp;일이&nbsp;표시될&nbsp;때마다&nbsp;발생">
		                            draw
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_focus" title="Input&nbsp;엘리먼트에&nbsp;포커스&nbsp;되었을&nbsp;때&nbsp;발생">
		                            focus
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_hideCalendar" title="달력&nbsp;레이어가&nbsp;닫혀진&nbsp;후&nbsp;상태에서&nbsp;발생하는&nbsp;이벤트">
		                            hideCalendar
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_mouseout" title="달력레이어의&nbsp;날짜에&nbsp;마우스아웃&nbsp;하였을&nbsp;때&nbsp;발생">
		                            mouseout
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_mouseover" title="달력레이어의&nbsp;날짜에&nbsp;마우스오버&nbsp;하였을&nbsp;때&nbsp;발생">
		                            mouseover
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_select" title="달력&nbsp;레이어에서&nbsp;날짜를&nbsp;선택하고&nbsp;Text&nbsp;Input에&nbsp;값이&nbsp;설정된&nbsp;이후&nbsp;실행">
		                            select
		                            
		                            
		                        </a>   
		                    </li>
		                
		                    <li class="">
		                        <a href="#event_showCalendar" title="달력&nbsp;레이어가&nbsp;펼쳐진&nbsp;후&nbsp;상태에서&nbsp;발생하는&nbsp;이벤트">
		                            showCalendar
		                            
		                            
		                        </a>   
		                    </li>
		                
		            </ul>
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		DatePicker
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.DatePicker
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l6" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    
	        <dt>상속</dt>
	        <dd>
	        	<a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a>
	        	<span class="arrow">→</span><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
	        </dd>
	    

	    
		
	    
		<dt>사용</dt>
		<dd><a href="..\classes\jindo.Calendar.html" class="crosslink">jindo.Calendar</a>, <a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a>, <a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></dd>
		
		
	    
		
		</dl>

		
		
		<div class="description"><p>Calendar 컴포넌트를 통해 출력된 달력의 날짜 선택으로 Input의 값을 입력한다.</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.DatePicker" class="name">jindo.DatePicker</a>
(elCalendarLayer:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
 
						<p><p>DatePicker 컴포넌트를 초기화한다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
			</tbody>
			</table>
		

        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_activate" class="name">activate</a>
( )
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_addDatePickerSet" class="name">addDatePickerSet</a>
(ht:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>DatePicker 세트를 추가한다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_deactivate" class="name">deactivate</a>
( )
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getCalendar" class="name">getCalendar</a>
( )
:<a href="..\classes\jindo.Calendar.html" class="crosslink">jindo.Calendar</a>
 
						<p><p>Calendar 객체를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getCalendarLayer" class="name">getCalendarLayer</a>
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>달력레이어를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getDate" class="name">getDate</a>
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>
 
						<p><p>선택된 날짜를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getDatePickerSet" class="name">getDatePickerSet</a>
([el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
						<p><p>DatePicker 세트를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getInput" class="name">getInput</a>
([htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a>
 
						<p><p>DatePicker 세트에 해당하는 Input 엘리먼트를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayerManager" class="name">getLayerManager</a>
( )
:<a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a>
 
						<p><p>LayerManager 객체를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_getLayerPosition" class="name">getLayerPosition</a>
( )
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a>
 
						<p><p>LayerPosition 객체를 가져온다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_isActivating" class="name">isActivating</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>컴포넌트의 활성여부를 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.UIComponent.html" class="crosslink">jindo.UIComponent</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_isSelectable" class="name">isSelectable</a>
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, htDate:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
 
						<p><p>지정한 날짜가 DatePicker 세트에서 선택가능한 날짜인지 확인한다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" inherited-item">
					<td class="type">
				        
				        
				        	<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
<span title="inherited" class="flag inherited"><span class="blind">inherited</span></span>
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_removeDatePickerSet" class="name">removeDatePickerSet</a>
(ht:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>DatePicker 세트를 제거한다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_setDate" class="name">setDate</a>
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, htDate:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>선택한 날짜에 대해 DatePicker 세트의 Input에 형식에 맞는 날짜 값을 설정한다.</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">이벤트</h2>
			
			<table class="tbl_board">
			<caption class="hide">이벤트</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">이벤트</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_afterDraw" class="name">afterDraw</a>
						<p><p>달력을 모두 그린 후에 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_beforeDraw" class="name">beforeDraw</a>
						<p><p>달력을 그리기 전에 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_beforeSelect" class="name">beforeSelect</a>
						<p><p>달력 레이어에서 날짜를 선택하고 Text Input에 값이 설정되기 직전에 실행</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_click" class="name">click</a>
						<p><p>Input 엘리먼트에 마우스 클릭 하였을 때 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_draw" class="name">draw</a>
						<p><p>달력을 그리면서 일이 표시될 때마다 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_focus" class="name">focus</a>
						<p><p>Input 엘리먼트에 포커스 되었을 때 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_hideCalendar" class="name">hideCalendar</a>
						<p><p>달력 레이어가 닫혀진 후 상태에서 발생하는 이벤트</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_mouseout" class="name">mouseout</a>
						<p><p>달력레이어의 날짜에 마우스아웃 하였을 때 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_mouseover" class="name">mouseover</a>
						<p><p>달력레이어의 날짜에 마우스오버 하였을 때 발생</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_select" class="name">select</a>
						<p><p>달력 레이어에서 날짜를 선택하고 Text Input에 값이 설정된 이후 실행</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#event_showCalendar" class="name">showCalendar</a>
						<p><p>달력 레이어가 펼쳐진 후 상태에서 발생하는 이벤트</p></p>
					</td>
					<td>jindo.DatePicker</td>
					</tr>
	            
			</tbody>
			</table>
        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_6a586bd6ae227a6ba2d98c96e8b06af1" class="manual item">
				    <h3>기능과 동작 방식</h3>
				    <div class="description"><p>jindo.DatePicker는 날짜 입력을 위한 컴포넌트이다. 
jindo.Calendar를 날짜 입력 도구로 사용하여 Text Input 컨트롤에 특정형식의 날짜를 입력할 수 있다.
DatePicker는 날짜를 선택하기 위한 달력 레이어와 입력된 날짜를 표시하는 Text Input 엘리먼트로 구성된다.
달력 레이어를 구성하기 위해 jindo.Calendar 컴포넌트를 사용하기 때문에 jindo.Calendar 컴포넌트에서 제공하는 기능과 커스텀 이벤트를 그대로 사용하여 달력 기능을 제어할 수 있다.
또한 달력 레이어의 노출시키는 구현은 jindo.LayerManager 컴포넌트를 사용하고 달력 레이어의 위치를 조정하는 구현은 jindo.LayerPosition 컴포넌트를 사용한다.
jindo.LayerPosition을 사용하여 달력 레이어를 포지셔닝 하기 위해선 초기화 옵션 중 bUseLayerPosition 속성(기본값 true)을 true로 설정해야 한다. bUseLayerPosition을 false로 설정하여 jindo.LayerPosition를 사용하지 않을 시 작성된 마크업, CSS 내용대로 달력 레이어가 노출된다.</p>

<h4>jindo.DatePicker 컴포넌트 초기화 하기</h4>

<p>jindo.DatePicker 생성 시 달력 레이어 엘리먼트와 초기화 옵션을 인자로 전달한다.
초기화 옵션 속성은 Calendar, LayerManager, LayerPosition, bUseLayerPosition이 있다.
Calendar, LayerManager, LayerPosition의 타입은 HashTable이다. 각각 jindo.Calendar, jindo.LayerManager, jindo.LayerPosition 컴포넌트를 초기화 하는 옵션을 설정한다. 해당 값을 설정하여 달력의 기능, 레이어 노출 방식, 레이어 노출 위치등을 제어할 수 있다. getCalendar(), getLayerManager(), getLayerPosition() 메서드를 통해 DatePicker에서 사용하는 컴포넌트 인자를 가져와 직접 제어하여 각 컴포넌트의 기능을 활용할 수도 있다. bUseLayerPosition는 jindo.LayerPosition을 사용하여 레이어를 포지셔닝 할지 여부를 설정한다.</p>

<p>아래 코드는 jindo.DatePicker 컴포넌트를 초기화 하는 예제이다.(아래 코드에 설정된 값은 디폴드 값이다)</p>

<pre class="code"><code class="prettyprint">var oDatePicker = new jindo.DatePicker("calendar_layer", {
    bUseLayerPosition : true, //LayerPosition을 사용해서 포지셔닝을 할지의 여부

    Calendar : { //Calendar를 위한 옵션
        sClassPrefix : "calendar-", //Default Class Prefix
        nYear : oDate.getFullYear(),
        nMonth : oDate.getMonth() + 1,
        nDate : oDate.getDate(),           
        sTitleFormat : "yyyy-mm", //달력의 제목부분에 표시될 형식
        aMonthTitle : ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"] //월 이름
    },

    LayerManager : { //LayerManager를 위한 옵션
        sCheckEvent : "click",
        nShowDelay : 0,
        nHideDelay : 0
    },

    LayerPosition : { //LayerPosition을 위한 옵션
        sPosition: "outside-bottom",
        sAlign: "left",
        nTop: 0,
        nLeft: 0,
        bAuto: false
    }
});
</code></pre>

<h4>Date Picker 엘리먼트 연결하기</h4>

<p>컴포넌트 초기화 후 addDatePickerSet 메서드를 호출하여 선택한 날짜가 표시될 Text Input 엘리먼트를 설정한다. addDatePickerSet 메서드는 달력을 띄우고 날짜를 표시하는 Date Picker 관련 설정을 HashTable을 통해서 인자로 받는다. 날짜가 표시되는 Text Input 엘리먼트 뿐만 아니라 Text Input 엘리먼트 이외에 달력을 보이게 할 엘리먼트를 함께 Date Picker로 설정할 수 있다. 또한 Text Input 엘리먼트에 기본 날짜값을 설정하고 날짜 선택 범위도 설정한다.</p>

<p>다음 코드를 통해 Date Picker 관련 설정 속성을 확인할 수 있다.</p>

<pre class="code"><code class="prettyprint">oDatePicker.addDatePickerSet({
    elInput : jindo.$("input"), //날짜가 입력될 input 엘리먼트
    elButton : jindo.$("button"), //input외에도 달력을 보이게 할 엘리먼트
    elLayerPosition : jindo.$("input"), //LayerPosition 컴포넌트로 자동으로 위치 조절시 기준이 되는 엘리먼트 (생략시 elInput이 디폴트)
    htOption : {
        nYear : 1983, //기본으로 설정될 연도
        nMonth : 5, //기본으로 설정될 월
        nDate : 12, //기본으로 설정될 일

        bDefaultSet : true, //true이면 기본 Input 값을 설정한다. false이면 설정하지 않는다.
        bReadOnly : true, //true이면 input에 직접 값을 입력하지 못한다.
        sDateFormat : "yyyy-mm-dd", //input에 입력될 날짜의 형식
        htSelectableDateFrom : { //선택가능한 첫 날짜
            nYear : 1900,
            nMonth : 1,
            nDate : 1              
        },
        htSelectableDateTo : { //선택가능한 마지막 날짜
            nYear : 2100,
            nMonth : 12,
            nDate : 31
        }
    }
});
</code></pre>

<h4>Text Input 엘리먼트만 DatePicker로 설정하기</h4>

<p><img src="..\..\..\resource/jindo.DatePicker/ex0.png" alt="" title="" /></p>

<pre class="code"><code class="prettyprint">var oDatePicker = new jindo.DatePicker(jindo.$("calendar_layer"), {
    Calendar : {
        sTitleFormat : "yyyy년 mm월"
    }
}).addDatePickerSet({
    elInput : jindo.$("date_input"),
    htOption : {
        bDefaultSet : false,
        sDateFormat : "yyyy-mm-dd"
    }
});
</code></pre>

<h4>Text Input 엘리먼트와 함께 버튼을 Date Picker로 설정하기</h4>

<p><img src="..\..\..\resource/jindo.DatePicker/ex1.png" alt="" title="" /></p>

<pre class="code"><code class="prettyprint">oDatePicker.addDatePickerSet({
    elInput : jindo.$("date_input"),
    elButton : jindo.$("btn_from"),
    htOption : {
        bDefaultSet : false,
        sDateFormat : "yyyy-mm-dd"
    }
});
</code></pre>

<h4>Date Picker Set을 여러개 설정하기</h4>

<p><img src="..\..\..\resource/jindo.DatePicker/ex2.png" alt="" title="" /></p>

<pre class="code"><code class="prettyprint">oDatePicker.addDatePickerSet({
    elInput : jindo.$("date_input"),
    elButton : jindo.$("btn_from"),
    htOption : {
        bDefaultSet : false,
        sDateFormat : "yyyy-mm-dd"
    }
}).addDatePickerSet({
    elInput : jindo.$("date_input2"),
    elButton : jindo.$("btn_from2"),
    htOption : {
        bDefaultSet : false,
        sDateFormat : "yyyy-mm-dd"
});
</code></pre>

<h4>커스텀이벤트 활용하여 날짜 선택 제어하기</h4>

<p>달력 레이어를 통해 날짜 선택 시 선택 되기 전 시점에 beforeSelect 이벤트가 발생한다. beforeSelect 이벤트 핸들러를 활용하여 선택 날짜의 유효성을 체크할 수 있다.</p>

<p>다음은 beforeSelect 이벤트를 활용하여 짝수날만 선택할 수 있도록 하는 예제다.</p>

<pre class="code"><code class="prettyprint">var oDatePicker = new jindo.DatePicker("calendar_layer").addDatePickerSet({
    elInput : jindo.$("date_input"),
    elButton : jindo.$("btn_from"),
    htOption : {
        sDateFormat : "yyyy-mm-dd"
    }
}).attach({
    beforeSelect : function(oCustomEvent) {
        if (oCustomEvent.nDate % 2 != 0) {
            alert("짝수 날만 선택할 수 있습니다.");
            oCustomEvent.stop();
        }
    }
});
</code></pre></div>
				</div>
            
				<div id="manual_cbd30bb38edc7ffc879aabd5f479a2c7" class="manual item">
				    <h3>기본 초기화 형태</h3>
				    <div class="description"><h4>HTML</h4>

<pre class="code"><code class="prettyprint">&lt;div id="datepicker-calendar" class="calendar"&gt; &lt;!-- 기준 엘리먼트 --&gt;
    &lt;div&gt;
        &lt;a href="#" class="rollover calendar-btn-prev-year"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_first.gif" alt="이전년" width="14" height="13"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_first_on.gif" alt="이전년" width="14" height="13" class="over"&gt;&lt;/a&gt; &lt;!-- 이전년 버튼 (생략가능) --&gt;
        &lt;a href="#" class="rollover calendar-btn-prev-mon"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_prev.gif" alt="이전달" width="13" height="13" class="pre"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_prev_on.gif" alt="이전달" width="13" height="13" class="over pre"&gt;&lt;/a&gt; &lt;!-- 이전달 버튼 (생략가능) --&gt;
        &lt;strong class="calendar-title"&gt;&lt;/strong&gt; &lt;!-- 달력의 타이틀 (생략가능) --&gt;
        &lt;a href="#" class="rollover calendar-btn-next-mon"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_next.gif" alt="다음달" width="13" height="13" class="next"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_next_on.gif" alt="다음달" width="13" height="13" class="over next"&gt;&lt;/a&gt; &lt;!-- 다음달 버튼 (생략가능) --&gt;
        &lt;a href="#" class="rollover calendar-btn-next-year"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_last.gif" alt="다음년" width="14" height="13"&gt;&lt;img src="../../resource/img/Calendar.btn_calendar_last_on.gif" alt="다음년" width="14" height="13" class="over"&gt;&lt;/a&gt; &lt;!-- 다음년 버튼 (생략가능) --&gt;
    &lt;/div&gt;
    &lt;table cellspacing="0" cellpadding="0"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th class="sun"&gt;S&lt;/th&gt;&lt;th&gt;M&lt;/th&gt;&lt;th&gt;T&lt;/th&gt;&lt;th&gt;W&lt;/th&gt;&lt;th&gt;T&lt;/th&gt;&lt;th&gt;F&lt;/th&gt;&lt;th class="sat"&gt;S&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr class="calendar-week"&gt; &lt;!-- 달력의 한 주에 해당하는 엘리먼트 컨테이너 --&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt; &lt;!-- 날짜가 표시될 엘리먼트 --&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
                &lt;td class="calendar-date"&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;input type="text" id="datepicker-input" /&gt;
</code></pre>

<p>jindo.Calendar를 표현하기 위한 마크업을 정의하고, 날짜가 지정될 Text Input을 선언한다.</p>

<h4>CSS</h4>

<pre class="code"><code class="prettyprint">.calendar {position:absolute; width:195px; z-index:99999;display:none;}
.calendar {width:195px;padding-bottom:9px;border:1px solid #777;background:#ffffff;}
.calendar div{margin-bottom:5px;padding:7px 0 9px 0px;text-align:center;background:#f6f6f6;}
.calendar div a.rollover img{border:0;display:inline; vertical-align:text-bottom; vertical-align:middle;}
.calendar div a.rollover img.over{display:none;}
.calendar div a.rollover:hover{border:0}
.calendar div a.rollover:hover img{display:none;}
.calendar div a.rollover:hover img.over{display:inline;}
.calendar div .calendar-title{float:none !important;font-family:verdana;font-size:12px;color:#383838; margin:0 7px;}
.calendar table{width:175px;margin:0 auto;text-align:center;}
.calendar table *{font-family:tahoma !important;font-size:10px;}
.calendar table td{width:25px;height:16px;text-align:center;color:#000000;}
.calendar table td a{display:block;height:15px;padding-top:1px;color:#000000;}
.calendar table td a:hover{background:#edf4fe;color:#6d6d6d;text-decoration:none !important;font-family:tahoma !important;}
.calendar table td a:visited,
.calendar table td a:active{color:#000000;text-decoration:none !important;}
.calendar table .calendar-selected{background:#edf4fe;color:#6d6d6d;}
.calendar table .calendar-selected a{color:#6d6d6d;text-decoration:none;}
.calendar table .calendar-sat{color:#2828e8;}
.calendar table .calendar-sat a,
.calendar table .calendar-sat a:visited,
.calendar table .calendar-sat a:hover,
.calendar table .calendar-sat a:active{color:#2828e8 !important;}
.calendar table .calendar-sun{color:#e82828;}
.calendar table .calendar-sun a,
.calendar table .calendar-sun a:visited,
.calendar table .calendar-sun a:hover,
.calendar table .calendar-sun a:active{color:#e82828 !important;}
.calendar table .calendar-today{background:#6595db;color:#ffffff;}
.calendar table .calendar-today a{font-weight:bold;text-decoration:none;color:#fff}
.calendar table .calendar-today a:hover,
.calendar table .calendar-today a:visited,
.calendar table .calendar-today a:active{background:#6595db;color:#fff}
.calendar table .calendar-prev-mon .calendar-date,
.calendar table .calendar-next-mon .calendar-date {display:none}
.calendar table .calendar-unselectable a:hover,
.calendar table .calendar-unselectable a:visited,
.calendar table .calendar-unselectable a:active,
.calendar table .calendar-unselectable a {background:none !important;color:#ccc !important; cursor:default;}   
</code></pre>

<p>jindo.Calendar를 표현하기 위한 css를 정의한다.</p>

<h4>JavaScript</h4>

<pre class="code"><code class="prettyprint">//include jindo.Componenet.js
//include jindo.UIComponent.js
//include jindo.Calendar.js
//include jindo.Timer.js
//include jindo.LayerManager.js
//include jindo.LayerPosition.js
//include jindo.DatePicker.js

var oDatePicker = new jindo.DatePicker(jindo.$("datepicker-calendar")).addDatePickerSet({
    elInput : jindo.$("datepicker-input")
});
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.DatePicker" class="constructor item">
	<h3>jindo.DatePicker()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l24" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.DatePicker
(elCalendarLayer:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>, [htOption:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])</code></div>
	<div class="description"><p>DatePicker 컴포넌트를 초기화한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">elCalendarLayer</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">달력을 출력할 레이어 엘리먼트 혹은 id</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">초기화 옵션 설정을 위한 객체.</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">bUseLayerPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">LayerPosition을 사용해서 포지셔닝을 할지 여부</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">Calendar</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">jindo.Calendar 를 위한 옵션</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">LayerManager</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">jindo.LayerManager 를 위한 옵션</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">LayerPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">jindo.LayerPosition 을 위한 옵션</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        	
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_activate" class="method item inherited-item">
	<h3>activate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>activate
( )
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>컴포넌트를 활성화한다.
_onActivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onActivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_addDatePickerSet" class="method item">
	<h3>addDatePickerSet()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l80" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>addDatePickerSet
(ht:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>DatePicker 세트를 추가한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">ht</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">DatePicker 세트 옵션</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">elInput</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">날짜가 입력될 input 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elButton</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">input외에도 달력을 보이게 할 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elLayerPosition</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">LayerPosition 컴포넌트로 자동으로 위치 조절시 기준이 되는 엘리먼트 (생략시 elInput이 디폴트)</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name optional">htOption</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">추가옵션</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name optional">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 현재년)</span>
    

    

    <p class="description">기본으로 설정될 연도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 현재월)</span>
    

    

    <p class="description">기본으로 설정될 월</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 현재일)</span>
    

    

    <p class="description">기본으로 설정될 일</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bDefaultSet</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">true이면 기본 Input 값을 설정한다. false이면 설정하지 않는다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">bReadOnly</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
        <span class="default">(기본값 : true)</span>
    

    

    <p class="description">true이면 input에 직접 값을 입력하지 못한다.</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">sDateFormat</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
        <span class="default">(기본값 : &quot;yyyy-mm-dd&quot;)</span>
    

    

    <p class="description">input에 입력될 날짜의 형식</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateFrom</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">선택가능한 첫 날짜</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateFrom.nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 1900)</span>
    

    

    <p class="description">년도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateFrom.nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 1)</span>
    

    

    <p class="description">월</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateFrom.nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 1)</span>
    

    

    <p class="description">일</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateTo</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">선택가능한 마지막 날짜</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateTo.nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 2100)</span>
    

    

    <p class="description">년도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name optional">htSelectableDateTo.nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 12)</span>
    

    

    <p class="description">월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">htSelectableDateTo.nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
        <span class="default">(기본값 : 31)</span>
    

    

    <p class="description">일</p>

	
	
    
</li>

        </ul>
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	<p class="description">지정한 DatePicker 세트를 추가한 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oDatePicker.addDatePickerSet({
    elInput : jindo.$("input"), //날짜가 입력될 input 엘리먼트
    elButton : jindo.$("button"), //input외에도 달력을 보이게 할 엘리먼트
    elLayerPosition : jindo.$("input"), //LayerPosition 컴포넌트로 자동으로 위치 조절시 기준이 되는 엘리먼트 (생략시 elInput이 디폴트)
    htOption : {
        nYear : 1983, //기본으로 설정될 연도
        nMonth : 5, //기본으로 설정될 월
        nDate : 12, //기본으로 설정될 일

        bDefaultSet : true, //true이면 기본 Input 값을 설정한다. false이면 설정하지 않는다.
        bReadOnly : true, //true이면 input에 직접 값을 입력하지 못한다.
        sDateFormat : "yyyy-mm-dd", //input에 입력될 날짜의 형식
        htSelectableDateFrom : { //선택가능한 첫 날짜
            nYear : 1900,
            nMonth : 1,
            nDate : 1               
        },
        htSelectableDateTo : { //선택가능한 마지막 날짜
            nYear : 2100,
            nMonth : 12,
            nDate : 31
        }
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_attach" class="method item inherited-item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_deactivate" class="method item inherited-item">
	<h3>deactivate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l55" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>deactivate
( )
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>컴포넌트를 비활성화한다.
_onDeactivate 메서드를 수행하므로 반드시 상속받는 클래스에 _onDeactivate 메서드가 정의되어야한다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item inherited-item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item inherited-item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item inherited-item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getCalendar" class="method item">
	<h3>getCalendar()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l350" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getCalendar
( )
:<a href="..\classes\jindo.Calendar.html" class="crosslink">jindo.Calendar</a></code></div>
	<div class="description"><p>Calendar 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Calendar.html" class="crosslink">jindo.Calendar</a></span>
	<p class="description">Calendar 객체</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
        <div class="see">
            <h4>참고</h4>
		    
	            <div class="example-content">
	                <a href="jindo.Calendar.html" target="_self">jindo.Calendar</a>
	            </div>
		    
        </div>
    
    
    
    
    

</div>

	        
	            
<div id="method_getCalendarLayer" class="method item">
	<h3>getCalendarLayer()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l248" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getCalendarLayer
( )
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>달력레이어를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	<p class="description">달력레이어 엘리먼트</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getDate" class="method item">
	<h3>getDate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l441" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getDate
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></code></div>
	<div class="description"><p>선택된 날짜를 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">htDatePickerSet</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">선택된 날짜를 가져올 DatePicker 세트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
	<p class="description">해당 DatePicker 세트에 선택된 날짜</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getDatePickerSet" class="method item">
	<h3>getDatePickerSet()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l228" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getDatePickerSet
([el:<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>])
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>DatePicker 세트를 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name optional">el</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">가져올 DatePicker 세트의 Input 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a> | <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	<p class="description">파라미터로 엘리먼트가 전달될 경우 해당 Input 엘리먼트가 속하는 DatePicker 세트 객체를, 파라미터가 없는 경우 DatePicker 세트 배열을 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getInput" class="method item">
	<h3>getInput()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l424" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getInput
([htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>])
:<a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></code></div>
	<div class="description"><p>DatePicker 세트에 해당하는 Input 엘리먼트를 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name optional">htDatePickerSet</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">Input 엘리먼트를 가져올 DatePicker 세트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
	<p class="description">해당 Input 엘리먼트, 파라미터가 없는 경우에는 현재포커스된 Input을 리턴하고, 포커스된 Input이 없는 경우 null을 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayerManager" class="method item">
	<h3>getLayerManager()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l398" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayerManager
( )
:<a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a></code></div>
	<div class="description"><p>LayerManager 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerManager.html" class="crosslink">jindo.LayerManager</a></span>
	<p class="description">LayerManager 객체</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getLayerPosition" class="method item">
	<h3>getLayerPosition()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l414" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getLayerPosition
( )
:<a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></code></div>
	<div class="description"><p>LayerPosition 객체를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.LayerPosition.html" class="crosslink">jindo.LayerPosition</a></span>
	<p class="description">LayerPosition 객체</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isActivating" class="method item inherited-item">
	<h3>isActivating()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.UIComponent.js.html#l23" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isActivating
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>컴포넌트의 활성여부를 가져온다.</p></div>

	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_isSelectable" class="method item">
	<h3>isSelectable()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l465" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>isSelectable
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, htDate:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)</code></div>
	<div class="description"><p>지정한 날짜가 DatePicker 세트에서 선택가능한 날짜인지 확인한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">htDatePickerSet</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">선택가능 여부를 확인할 DatePicker 세트</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">선택 가능 여부를 확인할 날짜</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">년도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">일</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item inherited-item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item inherited-item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		 
			<span class="flag inherited" title="inherited"><span class="blind">inherited</span></span>
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_removeDatePickerSet" class="method item">
	<h3>removeDatePickerSet()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l185" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>removeDatePickerSet
(ht:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></code></div>
	<div class="description"><p>DatePicker 세트를 제거한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">ht</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">삭제할 DatePicker 세트</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">elInput</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">해당 DatePicker 세트의 input 엘리먼트</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name optional">elButton</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
        <span class="default">(생략 가능)</span>
    

    

    <p class="description">해당 DatePicker 세트의 달력을 보이게 하는 엘리먼트</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.DatePicker.html" class="crosslink">jindo.DatePicker</a></span>
	<p class="description">지정한 DatePicker 세트를 제거한 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oDatePicker.removeDatePickerSet({
    elInput : jindo.$("input"), // 삭제할 DatePicker 세트의 input 엘리먼트
    elButton : jindo.$("button") // 삭제할 DatePicker 세트의 달력을 보이게 하는 엘리먼트
})
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_setDate" class="method item">
	<h3>setDate()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l479" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>setDate
(htDatePickerSet:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>, htDate:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>선택한 날짜에 대해 DatePicker 세트의 Input에 형식에 맞는 날짜 값을 설정한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">htDatePickerSet</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">TODO : 파라미터 설명달기</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">htDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">선택할 날짜</p>

	
	
    
        <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">년도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">일</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">DatePicker 세트에 선택한 날짜 설정이 성공했는지 여부</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="event">이벤트 세부 정보</h2>
	        
	            <div id="event_afterDraw" class="event item">
	<h3>afterDraw
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l334" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력을 모두 그린 후에 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려진 달력의 연도</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려진 달력의 월</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// afterDraw 커스텀 이벤트 핸들링
oDatePicker.attach("afterDraw", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_beforeDraw" class="event item">
	<h3>beforeDraw
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l267" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력을 그리기 전에 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려질 달력의 년</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려질 달력의 월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">달력이 새로 그려지지 않도록 중단시키는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// beforeDraw 커스텀 이벤트 핸들링
oDatePicker.attach("beforeDraw", function(oCustomEvent) {
    // 변경될 달력이 2000년 이전이면 변경시키지 않음
    if(oCustomEvent.nYear &lt; 2000){
        oCustomEvent.stop();
        alert("2000년 이전은 선택할 수 없습니다.");
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_beforeSelect" class="event item">
	<h3>beforeSelect
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l499" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력 레이어에서 날짜를 선택하고 Text Input에 값이 설정되기 직전에 실행</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">sText</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">Text Input에 설정될 값</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 연도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 월</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 일</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">stop</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">Text Input에 선택된 값 입력을 중단시키는 메서드</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// beforeSelect 커스텀 이벤트 핸들링
oDatePicker.attach("beforeSelect", function(oCustomEvent) {
    // Text Input에 값을 입력하지 않는다.
    // select 이벤트가 발생되기전에 수행을 중단한다.
    oCustomEvent.stop();
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_click" class="event item">
	<h3>click
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l623" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Input 엘리먼트에 마우스 클릭 하였을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">element</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">클릭된 Input 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// click 커스텀 이벤트 핸들링
oDatePicker.attach("click", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_draw" class="event item">
	<h3>draw
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l303" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력을 그리면서 일이 표시될 때마다 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">bPrevMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
    

    

    <p class="description">그려질 날이 이전달의 날인지 여부</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">bNextMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
    

    

    <p class="description">그려질 날이 다음달의 날인지 여부</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">날이 쓰여질 대상 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">elDateContainer</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">className이 [prefix]week로 설정된 엘리먼트의 자식 엘리먼트, elDate와 같을 수 있음</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려진 날의 연</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려진 날의 월</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">그려진 날의 일</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">sHTML</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">대상 엘리먼트에 쓰여질 HTML</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// draw 커스텀 이벤트 핸들링
var oHoliday = { ... }; // 공휴일 정보 설정

oDatePicker.attach("draw", function(oCustomEvent) {
    // 그려지는 날짜가 공휴일인지 검사한 후 설정하는 예제
    if (typeof oHoliday == "object" &amp;&amp; oHoliday[oCustomEvent.nYear]
        &amp;&amp; oHoliday[oCustomEvent.nYear][parseInt(oCustomEvent.nMonth * 1)]
        &amp;&amp; oHoliday[oCustomEvent.nYear][parseInt(oCustomEvent.nMonth * 1)][oCustomEvent.nDate]) {
            jindo.$Element(oCustomEvent.elDateContainer).addClass("calendar-holiday"); 
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_focus" class="event item">
	<h3>focus
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l606" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>Input 엘리먼트에 포커스 되었을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">element</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">포커스된 Input 엘리먼트</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// focus 커스텀 이벤트 핸들링
oDatePicker.attach("focus", function() { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_hideCalendar" class="event item">
	<h3>hideCalendar
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l385" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력 레이어가 닫혀진 후 상태에서 발생하는 이벤트</p></div>

	
	
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// select 커스텀 이벤트 핸들링
oDatePicker.attach("hideCalendar", function() { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_mouseout" class="event item">
	<h3>mouseout
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l759" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력레이어의 날짜에 마우스아웃 하였을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">element</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">마우스아웃된 Input 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 연도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 일</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// mouseout 커스텀 이벤트 핸들링
oDatePicker.attach("mouseout", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_mouseover" class="event item">
	<h3>mouseover
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l725" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력레이어의 날짜에 마우스오버 하였을 때 발생</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">element</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
    

    

    <p class="description">마우스오버된 Input 엘리먼트</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 연도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 일</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// mouseover 커스텀 이벤트 핸들링
oDatePicker.attach("mouseover", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_select" class="event item">
	<h3>select
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l520" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력 레이어에서 날짜를 선택하고 Text Input에 값이 설정된 이후 실행</p></div>

	
	
    
        <div class="params">
			<h4>속성</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sType</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nYear</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 연도</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">nMonth</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 월</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">nDate</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
    

    

    <p class="description">선택된 달력의 일</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// select 커스텀 이벤트 핸들링
oDatePicker.attach("select", function(oCustomEvent) { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            <div id="event_showCalendar" class="event item">
	<h3>showCalendar
		<span>이벤트</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.DatePicker.js.html#l370" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="description"><p>달력 레이어가 펼쳐진 후 상태에서 발생하는 이벤트</p></div>

	
	
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">// select 커스텀 이벤트 핸들링
oDatePicker.attach("showCalendar", function() { ... });
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    

    
        <div class="tc-panel">
			<h2 id="demo">데모</h2>
			<div class="demo">
				<ul class="demo_list" id="demo_list">
		            
		                <li><a href="../../../demo/jindo.DatePicker/1. basic.html" id="demo_a7ff9abff83cf689961ec1e207e12710" title="가장&nbsp;기본적인&nbsp;사용&nbsp;예제입니다." target="_blank">기본값을&nbsp;설정하지&nbsp;않은&nbsp;input</a></li>
		            
		                <li><a href="../../../demo/jindo.DatePicker/2. limit.html" id="demo_59c78725fc01c8ffc0c37e3239df34ad" title="선택할&nbsp;수&nbsp;있는&nbsp;날짜에&nbsp;제한을&nbsp;둔&nbsp;예제입니다." target="_blank">선택할&nbsp;수&nbsp;있는&nbsp;날짜&nbsp;제한</a></li>
		            
		                <li><a href="../../../demo/jindo.DatePicker/3. button.html" id="demo_ef1eff0e82e45c69158c106d1e3ea0de" title="input과&nbsp;버튼이&nbsp;함께&nbsp;있는&nbsp;경우의&nbsp;예제입니다." target="_blank">input과&nbsp;버튼이&nbsp;포함된&nbsp;경우</a></li>
		            
		                <li><a href="../../../demo/jindo.DatePicker/4. multiple.html" id="demo_57ba6b80a547f0dcd577ca68e6e3dd89" title="하나의&nbsp;인스턴스에서&nbsp;2개의&nbsp;DatePicker를&nbsp;사용하는&nbsp;예제입니다." target="_blank">2개의&nbsp;DatePicker를&nbsp;추가</a></li>
		            
	            </ul>
				<div class="demo_example" id="demo_example">
					<div class="clipboard" style="display:block">
						<p class="description" id="demo_desc"></p>
						<iframe src="about:blank" id="demo_iframe" name="demo_iframe" width="100%" height="366" frameborder="0"></iframe>
					</div>
				</div>
				<button type="button" id="btn_external" class="btn_external">새창으로 열기</button>
			</div>
        </div>
    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>